<template>
    <div class="dele">
        <ul>
            <li class="list-item "
                v-for="(item,index) in list"
                :key="index"
                data-type="0">
                <div class="list-box"
                     @touchstart.capture="touchStart"
                     @touchend.capture="touchEnd"
                     @click="skip">
                    <!-- <img class="list-img" :src="item.imgUrl" alt=""> -->
                    <div class="list_Left">
                        <h2>{{item.title}} </h2>
                        <p>{{item.tips}} </p>
                        <h5>
                            <span>【一般隐患】</span>
                            <em>已关闭</em>
                        </h5>
                    </div>
                    <div class="list_Right">
                        <img :src="item.imgUrl"
                             alt="">
                    </div>

                </div>
                <div class="delete"
                     @click="deleteItem"
                     :data-index="index">删除</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data () {
        return {
            list: [
                {
                    title: 'Chrome更新了',
                    imgUrl: '../../../static/images/index/banner.png',
                    tips: '不再支持Flash视频播放票房暴涨，',
                },
                {
                    title: 'Chrome更新了',
                    imgUrl: '../../../static/images/index/banner.png',
                    tips: '不再支持Flash视频播放票房暴涨，',
                },
            ],
            startX: 0,
            endX: 0,
        }
    },
    methods: {
        //跳转
        skip () {
            if (this.checkSlide()) {
                this.restSlide()
            } else {
                alert('You click the slide!')
            }
        },
        //滑动开始
        touchStart (e) {
            // 记录初始位置
            this.startX = e.touches[0].clientX
        },
        //滑动结束
        touchEnd (e) {
            // 当前滑动的父级元素
            let parentElement = e.currentTarget.parentElement
            // 记录结束位置
            this.endX = e.changedTouches[0].clientX
            // 左滑
            if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
                this.restSlide()
                parentElement.dataset.type = 1
            }
            // 右滑
            if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
                this.restSlide()
                parentElement.dataset.type = 0
            }
            this.startX = 0
            this.endX = 0
        },
        //判断当前是否有滑块处于滑动状态
        checkSlide () {
            let listItems = document.querySelectorAll('.list-item')
            for (let i = 0; i < listItems.length; i++) {
                if (listItems[i].dataset.type == 1) {
                    return true
                }
            }
            return false
        },
        //复位滑动状态
        restSlide () {
            let listItems = document.querySelectorAll('.list-item')
            // 复位
            for (let i = 0; i < listItems.length; i++) {
                listItems[i].dataset.type = 0
            }
        },
        //删除
        deleteItem (e) {
            // 当前索引
            let index = e.currentTarget.dataset.index;
            // 复位
            this.restSlide()
            // 删除
            this.list.splice(index, 1)
        }
    }
}
</script>
<style lang="less" scoped>
.dele {
    overflow: hidden;
    background-color: #fff;
}
.list-item {
    position: relative;
    height: 120px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    margin-top: 10px;
    border-bottom: 1px solid #eee;
    .list-box {
        padding: 10px;
        display: flex;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        justify-content: flex-end;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        font-size: 0;
        .list_Left {
            float: left;
            width: 220px;
            height: 120px;
            padding: 10px 0;
            h2 {
                width: 100%;
                font-size: 18px;
                font-weight: bold;
                margin-top: 14px;
            }
            p {
                font-size: 16px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 14px;
            }
            h5 {
                margin-top: 14px;
                font-size: 16px;
                width: 100%;
            }
        }
        .list_Right {
            width: 150px;
            height: 120px;
            float: right;
            padding: 14px 0;
            img {
                width: 100%;
                height: 100%;
                // border: 1px solid #fff;
                border-radius: 5px;
            }
        }
    }
}
.list-item[data-type='0'] {
    transform: translate3d(0, 0, 0);
}
.list-item[data-type='1'] {
    transform: translate3d(-100px, 0, 0);
}
.list-item:after {
    content: ' ';
    position: absolute;
    left: 20px;
    bottom: 0;
    right: 0;
    height: 1px;
    color: #ccc;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;
}

.list-item .delete {
    width: 100px;
    height: 120px;
    background: #ff4949;
    font-size: 17px;
    color: #fff;
    text-align: center;
    line-height: 120px;
    position: absolute;
    top: 0;
    right: -102px;
}
</style>

